<template>
  <div class="dept-container">
    <div class="tree-container">
      <el-input
        v-model="filterText"
        placeholder="输入部门关键字"
        size="small"
        style="margin-bottom: 10px">
      </el-input>
      <el-tree :data="treeData"
               :props="defaultProps"
               node-key="value"
               :default-expanded-keys="['0']"
               ref="deptTree"
               :filter-node-method="filterNode"
               @current-change="changeCurrentNode"
               @node-contextmenu="rightNodeClick"
               @node-click="handleNodeClick">
      </el-tree>
      <div v-show="rightOption" ref="rightOption">
        <el-menu class="right-menu"
                 background-color="#364C62"
                 text-color="#fff"
                 active-text-color="#409EFF"
                 @select="handleRightMenuSelect">
          <el-menu-item index="add" class="right-menu-item">
            <span slot="title">增加</span>
          </el-menu-item>
          <hr/>
          <el-menu-item index="update" class="right-menu-item">
            <span slot="title">修改</span>
          </el-menu-item>
          <hr/>
          <el-menu-item index="delete" class="right-menu-item">
            <span slot="title">删除</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="option-container" v-show="optionContainer==='add'">
      <h3>新增</h3>
      <el-form
        :model="addData"
        :rules="deptRules"
        ref="addDeptForm"
        label-width="110px">
        <el-form-item label="上级部门名称:">
          <div class="form-text">{{ deptData.current.label }}</div>
          <input type="hidden" v-model="addData.parentid"></input>
        </el-form-item>
        <el-form-item label="新增部门名称:" prop="label">
          <el-input v-model="addData.label" placeholder="请填写部门名称"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" @click="addDept">确定</el-button>
          <el-button native-type="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="option-container" v-show="optionContainer==='update'">
      <h3>修改</h3>
      <el-form
        :model="updateData"
        :rules="deptRules"
        ref="updateDeptForm"
        label-width="110px">
        <el-form-item label="上级部门名称:">
          <el-cascader
            placeholder="请选择上级部门"
            class="cascader"
            clearable
            v-model="updateData.parentid"
            :options="treeData"
            :props="{ checkStrictly: true, expandTrigger: 'hover' }"
            :show-all-levels="false"></el-cascader>
        </el-form-item>
        <el-form-item label="当前部门编号:">
          <div class="form-text">{{ updateData.id }}</div>
        </el-form-item>
        <el-form-item label="修改部门名称:" prop="label">
          <el-input v-model="updateData.label" placeholder="请填写部门名称"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" @click="updateDept">确定</el-button>
          <el-button native-type="reset">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="option-container" v-show="true">
      <h3>浏览</h3>
      <el-form :model="deptData" label-width="100px">
        <el-form-item label="上级部门编号:" v-if="deptData.parent.value">
          <div class="form-text">{{ deptData.parent.value }}</div>
        </el-form-item>
        <el-form-item label="上级部门名称:" v-if="deptData.parent.label">
          <div class="form-text">{{ deptData.parent.label }}</div>
        </el-form-item>
        <el-divider v-if="deptData.parent.label"></el-divider>
        <el-form-item label="当前部门编号:">
          <div class="form-text">{{ deptData.current.value }}</div>
        </el-form-item>
        <el-form-item label="当前部门名称:">
          <div class="form-text">{{ deptData.current.label }}</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {addDept, deleteDeptById, getDeptTree, updateDeptById} from "@/api/dept";

    export default {
      name: "sysDept",
      data() {
        return {
          filterText: '',
          defaultProps: {
            children: 'children',
            label: 'label'
          },
          treeData: [
/*            {
              value:'0',
              label: '部门分类',
              children: [
                {
                  value: '1',
                  label: '开发部',
                  children: [
                    {
                      value:'101',
                      label: '开发一组'
                    },
                    {
                      value:'102',
                      label: '开发二组'
                    }
                  ]
                },
                {
                  value: '2',
                  label: '人事部'
                },
                {
                  value: '3',
                  label: '销售部'
                }]
            }*/
          ],
          rightOption: false,
          optionContainer: '',
          deptData: {
            parent: { value:'', label: '' },
            current: { value:'', label: '' }
          },
          deptRules: {
            label: [{required: true, message: '请输入部门名称', trigger: 'blur'}]
          },
          addData: {
            parentid: '',
            label: ''
          },
          updateData: {
            parentid: '',
            id: '',
            label: ''
          }
        }
      },
      watch: {
        filterText(val) {
          this.$refs['deptTree'].filter(val);
        }
      },
      methods: {
        //新增部门
        addDept() {
          this.$refs['addDeptForm'].validate(valid=>{
            if(valid) {
              // console.log(this.addData)
              addDept(this.addData).then(res=>{
                if(res.data.code === 200) {
                  this.$message.success('添加成功')
                  this.getDepartmentTree()
                }
              })
            }
          })
        },
        //修改部门
        updateDept() {
          this.$refs['updateDeptForm'].validate(valid=> {
            if(valid) {
              if(this.updateData.parentid instanceof Array) {
                let arr = this.updateData.parentid;
                this.updateData.parentid = arr[arr.length-1]
              }
              // console.log(this.updateData)
              updateDeptById(this.updateData).then(res=>{
                if(res.data.code === 200) {
                  this.$message.success('更新成功')
                  this.getDepartmentTree()
                }
              })
            }
          })
        },
        //删除部门
        deleteDept(id) {
          deleteDeptById(id).then(res=>{
            if(res.data.code === 200) {
              this.$message.success('删除成功')
              this.getDepartmentTree()
            }
          })
        },
        //当前选中节点变化时触发的事件
        changeCurrentNode(data, node) {
          this.deptData.parent = node.parent.data;
          this.deptData.current = data;
          this.optionContainer = ''
        },
        //节点被点击时的回调
        handleNodeClick(data, node) {},
        //当某一节点被鼠标右键点击时会触发该事件
        rightNodeClick(event, data, node, el) {
          let deptData = this.deptData;
          if(deptData.parent !== node.parent.data || deptData.current !== data) {
            this.deptData.parent = node.parent.data;
            this.deptData.current = data;
          }
          document.addEventListener('click', ()=> {
            this.rightOption = false;
          })

          this.$refs.rightOption.style.left = `${event.clientX}px`;
          this.$refs.rightOption.style.top = `${event.clientY}px`;
          this.$refs.rightOption.style.position = 'absolute';
          this.rightOption = true
        },
        //右键菜单栏操作事件监听
        handleRightMenuSelect(index) {
          if(index === 'add') {
            this.addData.parentid = this.deptData.current.value;
            this.addData.label = '';
          }
          if(index === 'update') {
            this.updateData.label = this.deptData.current.label;
            this.updateData.id = this.deptData.current.value;
            this.updateData.parentid = this.deptData.parent.value;
          }
          if(index === 'delete') {
            let children = this.deptData.current.children;
            if(children != null) {
              this.$message.error('无法删除含有子节点的部门');
              return;
            }else{
              this.$confirm('是否删除该节点部门?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                // console.log(this.deptData.current.value)
                this.deleteDept(this.deptData.current.value);
              }).catch(() => {
                // this.$message({
                //   type: 'info',
                //   message: '已取消删除'
                // });
              });
            }
          }
          this.optionContainer = index;
        },
        //对节点进行过滤方法
        filterNode(value, data) {
          if(!value) return true;
          return data.label.indexOf(value) !== -1;
        },
        //获取部门树
        initDepartmentTree() {
          this.$store.dispatch('getSelectDepartmentTree').then(deptTree =>{
            this.treeData = deptTree;
          })
        }
      },
      mounted() {
        this.initDepartmentTree()
      }
    }
</script>

<style lang="scss">
  .dept-container {
    display: flex;
    flex-flow: nowrap;
    justify-content: space-between;

    .tree-container {
      display: block;
      background-color: #fff !important;
      padding: 20px;
      min-width: 220px;
      min-height: 610px;
    }
    .option-container {
      background: #fff;
      margin-left: 10px;
      /*width: calc(100% - 240px);*/
      width: 100%;
      min-height: 610px;
      padding: 30px 90px;

      h3 {
        text-align: left;
        margin: 30px 0;
        color: #2c3e50;
        font-size: 22px;
        border-bottom: 1px #ccc dashed;
        padding-bottom: 20px;
      }
      .form-text {
        text-align: left;
        margin-left: 10px;
      }
      .cascader {
        display: block;
        width:200px;
        text-align: left;
      }
    }
  }
  .right-menu {
    border:1px #ccc solid;
    border-radius: 5%;
    width: 100px;
    .right-menu-item {
      height: 35px;
      line-height: 35px;
      border-radius: 5%;
    }
  }
</style>
